<template>
	<div class="import-dialog-view">
		<div class="import-dialog">
			<div class="title">
				<p>Excelのインポート（{{ title }}）</p>
				<i class="el-icon-close" @click="$emit('CloseImportDiloag')"></i>
			</div>
			<div class="import-dialog-body">
				<el-upload class="upload-demo" drag :action="action" :multiple="false" ref="upload"
					style="textalign: center" :on-error="uploadFalse" :on-success="uploadSuccess" :auto-upload="false"
					:before-upload="beforeAvatarUpload" :data="form" :file-list="fileList" :headers="token"
					:on-change="handleFileChange">
					<i class="el-icon-upload"></i>
					<div class="el-upload__text">
						<!-- ここにドラッグ或 
						<em>{{ $t("message.homePageTable.finishedFile") }}</em> -->
						ここにドラッグあるいはアップロード
					</div>
				</el-upload>
				<div
					:class="$store.state.macType == 2 && title == $t('message.environmentSetting.export.title_6') ? 'check-view' : 'check-view1'">
					<el-checkbox v-model="form.isExist"
						v-if="$store.state.macType == 2 && title == $t('message.environmentSetting.export.title_6')">同一ラインNo.が存在した場合、ラインNo.を共有する</el-checkbox>
					<!-- 肉厚测定方位 -->
					<el-checkbox v-model="form.NewRegulations"
						v-if="title == $t('message.environmentSetting.export.title_14')">新規追加時、「New」を上書きする</el-checkbox>
				</div>
				<div v-if="title == $t('message.environmentSetting.export.title_32')">
					<div class="check-view1" style="margin-top: 0;">
						<el-radio v-model="ImportOption" :label="1">全て上書き</el-radio>
						<el-radio v-model="ImportOption" :label="2">入力済みのデータは上書きしない</el-radio>
					</div>
				</div>
				<div v-if="title == $t('message.environmentSetting.export.title_26')">
					<div class="check-view1" style="margin-top: 0;">
						<el-radio v-model="ImportOption" :label="1">全て上書き</el-radio>
						<el-radio v-model="ImportOption" :label="2"
							@change="Effective = false">入力済みのデータは上書きしない</el-radio>
					</div>
					<div class="check-view" style="margin-top: 0;">
						<el-checkbox v-model="Effective" :disabled="ImportOption == 2">「実施日」のみ登録セルを取込</el-checkbox>
					</div>
				</div>
				<!-- Excelのインポート（詳細仕様） -->
				<div v-if="title == $t('message.environmentSetting.export.title_7')"
					style="padding: 0 50px;margin-top: -40px;">
					<el-input size="small" v-model="fileName" readonly></el-input>
					<el-button size="small" style="margin: 10px 0;float: right;"
						@click="submitUpload1()">シート名の読込み</el-button>
					<div class="check-view" style="margin: 0 0 0 0;padding: 22px 5px;width: 100%;">
						<span style="width: 130px;display: inline-block;text-align: center;">シート</span>
						<el-select size="small" v-model="sheetName" placeholder class="select-input"
							style="width: 90%;">
							<el-option v-for="item in sheetList" :key="item" :label="item" :value="item"></el-option>
						</el-select>
					</div>
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="onCancel" class="btn">
						{{ $t("message.public.cancel") }}
					</el-button>
					<el-button type="primary" class="btn" @click="submitUpload()">
						{{ $t("message.public.confirm") }}
					</el-button>
				</span>
			</div>
		</div>
	</div>
</template>

<script>

import BASE from "../../../utils/base";
import { getLocalStorage } from "../../../utils/storage";
import {
	ImportThickDeterResVerify,
	ImportThickDeterResDataCheck,
	ImportThickDeterRes,
	ImportDetailedSpecification
} from "@/api/api";
import eventBus from "@/eventBus/bus";
export default {
	name: "ImportDialog",
	props: ["title", "_api"],
	data() {
		return {
			ImportOption: 1,
			Effective: false,
			form: {
				account: getLocalStorage("userName"),
				userID: getLocalStorage("userID"),
				isExist: false,
				NewRegulations: false,
				MacType: this.$store.state.macType,
				// FileNametxt: '123'
				PltCode: this.$store.state.pltCode,
			},
			fileList: [],
			action: BASE.IP + this._api,
			token: {
				Authorization:
					"Bearer " +
					(sessionStorage.token && getLocalStorage("token")
						? sessionStorage.token
						: ""),
			},
			sheetName: '',
			sheetList: [],
			fileName: '',
			title7_FilePath: '',
			MacType: this.$store.state.macType,
		};
	},
	components: {},
	watch: {},
	methods: {
		/**
		 * 肉厚测定结果
		 */
		async ImportThickDeterResVerifyFn() {
			let D = {
				ImportOption: this.ImportOption,
				Effective: this.Effective,
			}
			let R = await ImportThickDeterResVerify(D);
			return R.data;
		},
		handleFileChange(file, fileList) {
			// 当文件变化时，更新选择的文件和显示的文件列表  
			this.fileList = file ? [file] : [];
		},
		//文件上传失败触发
		uploadFalse(response, file, fileList) {
			this.$alert('システムエラーが発生しました。ご迷惑をお掛けして申し訳御座いません。システム管理者に問い合わせください。', '', {
				confirmButtonText: 'OK',
				type: 'warning',
			});

		},
		//文件上传成功触发
		async uploadSuccess(response, file, fileList) {
			console.log(this._api, fileList);
			if (this.title != this.$t('message.environmentSetting.export.title_7')) {
				// 关闭弹框
				this.fileList = [];
				this.$emit("CloseImportDiloag");
			}

			if (response.code == 0) {
				if (this.title == this.$t('message.environmentSetting.export.title_6')) {
					//	刷新左侧列表
					eventBus.$emit('ExeclReGetFn');
				}
				if (this.title == this.$t('message.environmentSetting.export.title_30') || this.title == this.$t('message.environmentSetting.export.title_20')) {
					if (typeof (response.data) == 'string') {
						window.open(response.data);
						return
					}
				}

				// Excelのインポート（詳細仕様）=>先获取，sheetname=《再次调用上传
				if (this.title == this.$t('message.environmentSetting.export.title_7')) {
					console.log(response);
					this.sheetList = response.data.sheets;
					this.sheetName = response.data.sheets[0];
					this.title7_FilePath = response.data.filePath;
					this.fileName = fileList[0].name;
					return
				}
				// if (this.title == this.$t('message.environmentSetting.export.title_32')) {
				// 	this.$alert(response.msg, '', {
				// 		confirmButtonText: 'OK',
				// 		callback: action => {
				// 		}
				// 	});
				// 	return
				// }

				if (this.title == this.$t('message.environmentSetting.export.title_26')) {

					let D = Object.assign(response.data, {
						ImportOption: this.ImportOption,
						Effective: this.Effective,
						IsOk: true,
						account: getLocalStorage("userName"),
					})
					let R = await ImportThickDeterRes(D);
					this.fileList = [];
					console.log(R);
					if (R.data.code == 0) {
						this.$message({
							message: R.data.msg,
							type: "success",
						});
						return
					}
					if (R.data.code == -311) {
						window.open(R.data.data)
						return
					}
					this.$alert(R.data.msg, '', {
						confirmButtonText: 'OK',
						type: 'warning',
					});
					return
				}
				this.fileList = [];
				this.$message({
					// message: this.$t("message.homePageTable.suploaded"),
					message: response.msg,
					type: "success",
				});
				return
			} else if (response.code == 451) {
				if (this.title == this.$t('message.environmentSetting.export.title_26')) {
					this.$confirm(response.msg, '', {
						confirmButtonText: 'OK',
						cancelButtonText: 'Cancel',
						type: 'warning'
					}).then(async () => {
						let D = Object.assign(response.data, {
							ImportOption: this.ImportOption,
							Effective: this.Effective,
							IsOk: true,
							account: getLocalStorage("userName"),
						})
						let R = await ImportThickDeterRes(D);
						this.fileList = [];
						if (R.data.code == 0) {
							this.$message({
								message: R.data.msg,
								type: "success",
							});
							return
						}
						if (R.data.code == -311) {
							window.open(R.data.data)
							return
						}
						this.$alert(R.data.msg, '', {
							confirmButtonText: 'OK',
							type: 'warning',
						});

					}).catch(async () => {
						let D = Object.assign(response.data, {
							ImportOption: this.ImportOption,
							Effective: this.Effective,
							IsOk: false,
							account: getLocalStorage("userName"),
						})
						let R = await ImportThickDeterRes(D);
						this.fileList = [];
						if (R.data.code == 0) {
							this.$message({
								message: R.data.msg,
								type: "success",
							});
							return
						}
						if (R.data.code == -311) {
							window.open(R.data.data)
							return
						}
						this.$alert(R.data.msg, '', {
							confirmButtonText: 'OK',
							type: 'warning',
						});
					});
					return
				}
				return
			} else if (response.code == -311) {
				if (this.title == '損傷発生条件表' || this.title == '引張許容応力表') {
					this.$message({
						message: response.msg,
						type: "error",
					});
				}
				window.open(response.data)
				return
			} else if (response.code == -300) {
				this.$alert(response.msg, '', {
					confirmButtonText: 'OK',
					type: 'warning',
				});
				return
			} else if (response.code != 0) {
				this.$alert(response.msg, '', {
					confirmButtonText: 'OK',
					type: 'warning',
				});
				return
			}
		},
		// 上传前対文件的大小和类型的判断
		beforeAvatarUpload(file) {

			console.log('file', file.size, file);

			if (file.size > 524288000) {
				this.$alert(this.$t('message.public.tip2'), '', {
					confirmButtonText: 'OK',
					type: 'warning',
				});
				return false;
			}

		},
		//表单提交
		async submitUpload() {
			if (this.title == this.$t('message.environmentSetting.export.title_26')) {
				delete this.form.isExist
				let R = await this.ImportThickDeterResVerifyFn();
				if (R.code == 451) {
					this.$confirm(R.data, '', {
						confirmButtonText: 'OK',
						cancelButtonText: 'Cancel',
						type: 'warning'
					}).then(async () => {
						this.$refs.upload.submit();
					}).catch(() => {
					});
				} else if (R.code == 0) {
					this.$refs.upload.submit();

				}

				return
			}

			if (!this._api) {
				this.$alert("In function development...", '', {
					confirmButtonText: 'OK',
					type: 'warning',
				});
				return;
			}
			if (this.title == this.$t('message.environmentSetting.export.title_7')) {
				if (this.sheetName == '') {
					return
				}
				let DataJson = {
					FilePath: this.title7_FilePath,
					sheetName: this.sheetName
				}
				let res = await ImportDetailedSpecification(DataJson);
				if (res.data.code == -311) {
					window.open(res.data.data)
					return
				}
				if (res.data.code != 0) {
					this.$alert(res.data.msg, '', {
						confirmButtonText: 'OK',
						type: 'warning',
					});
					return
				}
				this.$message.success(res.data.msg);
				this.onCancel();
				return
			}
			this.$refs.upload.submit();

		},
		//表单提交
		async submitUpload1() {
			this.$refs.upload.submit();
		},
		//表单取消
		onCancel() {
			this.fileList = [];
			this.$emit("CloseImportDiloag");
		},
	},
	created() { },
	mounted() { },
	beforeDestroy() { },
	destroyed() { },
};
</script>
<style lang="scss" scoped>
.import-dialog-view {
	width: 100%;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 6;

	.import-dialog {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 488px;
		min-height: 393px;
		background: #ffffff;
		box-shadow: 0px 12px 48px 16px rgba(0, 0, 0, 0.05),
			0px 9px 28px 0px rgba(0, 0, 0, 0.08),
			0px 6px 16px -8px rgba(0, 0, 0, 0.15);

		.title {
			// width: 100%;
			height: 42px;
			border-bottom: 1px solid #f0f0f0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 24px;
			font-size: 16px;

			p {
				font-weight: bold;
				color: rgba(0, 0, 0, 0.85);
			}

			.el-icon-close {
				cursor: pointer;
			}
		}
	}

	.upload-demo {
		width: 360px;
		margin: 0 auto;
		margin-top: 24px;
	}

	.check-view {
		margin: 36px 24px 0 24px;
		height: 32px;
		padding: 0 18px;
		background: #f0f0f0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.check-view1 {
		margin: 36px 24px 0 24px;
		height: 32px;
		padding: 0 18px;
		background: #fff;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.dialog-footer {
		margin: 24px 0;
		display: flex;
		justify-content: center;
		align-items: center;

		button {
			width: 82px !important;
			height: 32px;
			// background: #ffffff;
			// border: 1px solid #d9d9d9;
			// cursor: pointer;
			line-height: 0;
		}

		button:nth-child(2) {
			margin-left: 16px;
			// color: #ffffff;
			// background: #106ebe;
		}

		::v-deep .el-button:hover,
		.el-button:focus {
			color: none;
		}
	}
}
</style>
